<template>
  <div>
    <p>我是分类页</p>
    <hr />
    <!-- 映射方式:操作一级模块中store 中的数据 -->
    <p>store中的count: {{ count }}</p>
    <p>store中的doubleCount:{{ doubleCount }}</p>
    <p>
      <button @click="add">+1</button>
      <button @click="addStep(10)">+10</button>
      <button @click="addAsync">异步+1</button>
      <button @click="addStepAsync(10)">异步+10</button>
    </p>
  </div>
</template>

<script>
// 使用辅助函数的形式,操作state 和getters;
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },
  computed: {
    ...mapState(["count"]),
    // count() {
    //   return this.$store.state.count;
    // },
    ...mapGetters(["doubleCount"]),
  },
  methods: {
    ...mapMutations(["add", "addStep"]),
    ...mapActions(["addAsync", "addStepAsync"]),
  },
  created() {
    //获取参数
    console.log("category", this.$route.query);
  },
};
</script>
<style scoped>
</style>